import React from 'react';
import Bread from '../../component/TableContent/VipBread';
import { Breadcrumb, Input, Select, Table,Tag ,Modal, message,Button } from 'antd';
import axios from '../../utils/http'
const { Option } = Select;

class Partner extends React.Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    tableData: [],
    returnobj: {
      cmtptsId:'',//id
      cmtptsName:'',//姓名
      cmtptsPhone:'',//手机号码
      cmtptsCmtsca:'',//小区规模
      cmtptsCmtars:'',//小区地址
      cmtptsAt: '',//申请时间
      cmtptsRd:'',//是否充值押金
      cmtptsAs:'',//审核状态
    },
    selectreturn: {
      cmtptsName:'',
      cmtptsPhone:'',
      cmtptsRd:'',
      cmtptsAs:'',
    },
    visible: false,
    close:false
  };
  inputchange = who => {
    return e=> {
      let selectreturn = this.state.selectreturn
      selectreturn[who] = e.target.value
      this.setState({
        selectreturn
      })
    }
  }
  onChange = (who) => {
    return (value) => {
      let selectreturn = this.state.selectreturn
      selectreturn[who] = value
      this.setState({
        selectreturn
      })
    }
  }
  seach = () => {
    console.log(this.state.selectreturn)
    axios({
      url: '/member/queryCmtptsByCondition',
      method: 'get',
      params:this.state.selectreturn
    }).then( data  => {
      console.log(data)
    })
  }
  retrunThis = () => {
    return this
  }
  // 批量删除
  piliandel = () => {
    axios({
      url: '/member/deleteCmtptsStatusByIds',
      method: 'post',
      data: {"cmtptsIdList":this.state.selectedRowKeys}
    }).then(data => {
      console.log(data)
    })
  }
  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };
  shequ = () => {
    this.props.history.push('/Home/huiYuan/Partner')
  }
  addparter = () => {
    this.props.history.push('/Home/huiYuan/AddPartner')
  }
  jiesuan = () => {
    this.props.history.push('/Home/huiYuan/SetManage')
  }
  chulievent = (e,a) => {
    return () => {
      if (e === '修改') {
        console.log(this)
        axios({
          url: '/member/queryCmtptsByCondition',
          method: 'get',
          params: {
            cmtptsName: a.cmtptsName
          }
        }).then(data => {
          this.setState({
            visible: true,
            returnobj:data.data.data[0]
          })
          this.forceUpdate()
          console.log(data.data.data[0])
        })
        
        console.log(a.cmtptsName)
      } else if (e === '删除') {
        console.log(3)
        console.log(a.cmtptsId)
        axios({
          url: '/member/deleteCmtptsStatus',
          method: 'get',
          params: {
            cmtptsId:a.cmtptsId
          }
        }).then(data => {
          if (data.data.code === 200) {
            message.success('删除成功')
          }
        })
      }
    }
  }
  handleOk = () => {
    this.setState({
      close:true
    },()=>this.confirmLoading()
    )
  }
  confirmLoading = () => {
    setTimeout(() => {
      this.setState({
      visible:false
    })
    }, 2000);
  }
  handleCancel = () => {
    this.setState({
      visible:false
    })
  }
  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      selections: [
        Table.SELECTION_ALL,
        Table.SELECTION_INVERT,
        {
          key: 'odd',
          text: 'Select Odd Row',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return false;
              }
              return true;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          },
        },
        {
          key: 'even',
          text: 'Select Even Row',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return true;
              }
              return false;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          },
        },
      ],
    };
    const columns = [
      {
        title: 'ID',
        dataIndex: 'cmtptsId',
      },
      {
        title: '姓名',
        dataIndex: 'cmtptsName',
      },
      {
        title: '手机号码',
        dataIndex: 'cmtptsPhone',
      },
      {
        title: '小区规模',
        dataIndex: 'cmtptsCmtsca',
      },
      {
        title: '小区地址',
        dataIndex: 'cmtptsCmtars',
      },
      {
        title: '申请时间',
        dataIndex: 'cmtptsAt',
      },
      {
        title: '是否充值押金',
        dataIndex: 'cmtptsRd',
      },
      {
        title: '审核状态',
        dataIndex: 'cmtptsAs',
      },
      {
        title: '操作',
        dataIndex: 'tags',
        render: (tags,cmtptsId) => (
          <>
            {tags.map(tag => {
              return (//
                <Tag color='purple' key={tag} onClick={this.chulievent(tag,cmtptsId)}>
                  {tag.toUpperCase()}
                </Tag>
              );
            })} 
          </>
        ),
      },
  ];
  return (
    
    <div>
      <Bread mianbao='社区合伙人'></Bread>
      <Breadcrumb>
        <Breadcrumb.Item onClick={this.shequ}>社区合伙人管理</Breadcrumb.Item>
        <Breadcrumb.Item onClick={this.addparter}>添加社区合伙人</Breadcrumb.Item>
        <Breadcrumb.Item onClick={this.jiesuan}>结算管理</Breadcrumb.Item>
      </Breadcrumb>
      <div className='wrapper'>
        姓名 <Input style={{ width: 200 }} onChange={ this.inputchange('cmtptsName')}></Input> 
        手机号码 <Input style={{width:200}} onChange={ this.inputchange('cmtptsPhone')}></Input> 
        是否充值押金 <Select
          showSearch
          style={{ width: 200 }}
          placeholder="请选择"
          optionFilterProp="children"
          onChange={this.onChange('cmtptsRd')}
          filterOption={(input, option) =>
            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
          }
        >
          <Option value="1">是</Option>
          <Option value="0">否</Option>
        </Select>
        审核状态 <Select
          showSearch
          style={{ width: 200 }}
          placeholder="请选择"
          optionFilterProp="children"
          onChange={this.onChange('cmtptsAs')}
          
          filterOption={(input, option) =>
            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
          }
        >
          <Option value="0">已审核</Option>
          <Option value="1">审核中</Option>
          <Option value="2">未通过</Option>
        </Select>,  
        <Button className='surename' onClick={this.seach}>搜索</Button>
        <div>
          <Table style={{marginTop:'5rem'}} rowSelection={rowSelection} columns={columns} dataSource={this.state.tableData} />
        </div>
        <Button className='surename' onClick={this.piliandel}>批量删除</Button>
      </div>
      <Modal
        title="修改数据"
        visible={this.state.visible}
        onOk={this.handleOk}
        confirmLoading={this.state.close}
        onCancel={this.handleCancel}
      >
        <p>姓名:<Input style={{ width: '10rem',color:'black' }} defaultValue={this.state.returnobj.cmtptsName}></Input></p>
        <p>手机号码:<Input style={{ width: '10rem' ,color:'black'}} defaultValue={this.state.returnobj.cmtptsPhone}></Input></p>
        <p>小区规模:<Input style={{ width: '10rem',color:'black' }} defaultValue={this.state.returnobj.cmtptsCmtsca}></Input></p>
        <p>小区地址:<Input style={{ width: '10rem' ,color:'black'}} defaultValue={this.state.returnobj.cmtptsCmtars}></Input></p>
        <p>申请时间:<Input style={{ width: '10rem' ,color:'black'}} defaultValue={this.state.returnobj.cmtptsAt}></Input></p>
        <p>是否充值押金:<Input style={{ width: '10rem' ,color:'black'}} defaultValue={this.state.returnobj.cmtptsRd}></Input></p>
        <p>审核状态:<Input style={{ width: '10rem',color:'black' }} defaultValue={this.state.returnobj.cmtptsAs}></Input></p>
      </Modal>
    </div>
  );
  }
  componentDidMount() {
    axios({
      url: '/member/queryCmtpts',
      method:'get'
    }).then(({ data })=> {
      for (let i = 0; i < data.data.length; i++){
        data.data[i].key = i
        data.data[i].tags = ['修改', '删除']
        data.data[i].cmtptsRd= data.data[i].cmtptsRd===0 ? '否':'是'
        data.data[i].cmtptsAs= data.data[i].cmtptsAs===0 ? '未审核':data.data[i].cmtptsAs===0 ? '审核中':'已审核'
      }
      console.log(data.data)
      this.setState({
        tableData:data.data
      })
    })
  }
}
export default Partner;